<template>
  <div class="music-discovery f fd-col w-100p h-100p">
    <n-tabs class="f1 h-0" type="line" animated :on-update:value="onTabChange">
      <n-tab-pane v-for="item in tabs" :key="item.tabEnglishName" :name="item.tabEnglishName" :display-directive="item.displayDirective">
        <template #tab>
          <div class="custom-tab-wrapper">
            <span class="custom-tab f-sz-22">{{ item.tabName }}</span>
            <span class="line"></span>
          </div>
        </template>
        <component :is="componentCollect[item.tabEnglishName]" ref="componentRef" />
      </n-tab-pane>
    </n-tabs>
  </div>
</template>
<script setup lang="ts">
  import { fixedMenuConfig } from '@/settings/menu';
  import { useAppStoreOut } from '@/stores/modules/app';
  import { useDesignSettingStoreOut } from '@/stores/modules/designSetting';
  import type { Component } from 'vue';

  /**
   * @todo ts找不到模块声明
   */
  // @ts-ignore
  import PersonalizedRecommendations from './personalized-recommendations';
  // @ts-ignore
  import ExclusiveCustomization from './exclusive-customization';
  // @ts-ignore
  import SongSheet from './song-sheet';
  // @ts-ignore
  import RankingList from './ranking-list';
  // @ts-ignore
  import Singer from './singer';
  // @ts-ignore
  import LatestMusic from './latest-music';

  let tabs: any[] = [];

  const appStore = useAppStoreOut();
  const { currentMenuRoute } = appStore;
  const designSettingStore = useDesignSettingStoreOut();
  const { appTheme } = designSettingStore;
  const { menuList } = fixedMenuConfig;
  const componentCollect = {
    PersonalizedRecommendations,
    ExclusiveCustomization,
    SongSheet,
    RankingList,
    Singer,
    LatestMusic,
  };

  const componentRef = ref<null | Component[]>(null);

  const getTabs = () => {
    const findTabs = menuList.find((item) => item.path === currentMenuRoute.path)?.tabs || [];
    tabs = findTabs;
  };

  const initPage = () => {
    getTabs();
  };

  const onTabChange = (tab) => {
    const tabConfigArr = tabs.map((item) => ({ tabEnglishName: item.tabEnglishName, displayDirective: item.displayDirective }));
    switch (tab) {
      case tabConfigArr[0].tabEnglishName:
        // @ts-ignore
        componentRef.value[0]?.loadData();
        break;
      default:
        break;
    }
  };

  initPage();
</script>
<style lang="scss">
  .music-discovery {
    .n-tabs-nav-scroll-content {
      border-bottom: none !important;
      .n-tabs-tab {
        font-size: 16px !important;
        &:hover {
          color: #000;
        }
        &.n-tabs-tab--active {
          font-size: 18px !important;
          font-weight: bold;
          color: #000;

          .custom-tab-wrapper {
            .line {
              background-color: v-bind(appTheme);
            }
          }
        }
      }
      .n-tabs-bar {
        display: none;
        height: 4px;
      }

      .n-tabs-wrapper {
        padding-left: 36px;
      }

      .custom-tab-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        .line {
          margin-top: 6px;
          width: 80%;
          height: 4px;
          border-radius: 4px;
        }
      }
    }

    .n-tabs-pane-wrapper,
    .n-tab-pane {
      display: flex;
      flex-direction: column;
      flex: 1;
      height: 0;
    }
  }
</style>
